@media (max-width: 768px) {

        .home-section {
            left: 0 !important;
            width: 100% !important;
        }

        /* 3) Ajusta o div-scroll-cadastro para altura automática (sem fixar em 77vh) */
        .div-scroll-cadastro {
            /* height: auto !important; */
            padding-bottom: 1rem; /* opcional, para deixar um espaçamento embaixo */
            max-height: none;
            overflow-y: visible !important;
        }

        /* 4) Faz cada container dentro de div-scroll-cadastro ocupar 100% da largura */
        .div-scroll-cadastro .container {
            width: 100% !important;
            margin: 1rem 0;
            padding: 1rem;         /* mantém um espaçamento interno sem “estourar” */
        }


		.logo {
			width: 8vw; /* ou um valor fixo de ~40px, por exemplo */
			height: auto;
		}

		.logo-container {
			padding-left: 0.5rem;
			align-items: center; /* já estava, mas reforça a centralização vertical */
		}

		.hamburger {
			display: flex;
			font-size: 1.8rem;     /* aumenta o ícone */
			margin-right: 0.3rem;  /* espaço entre hamburger e logo */
		}

		.search-wrapper {
			width: calc(100% - 2rem); /* ou “100%” puro, ajustando margens se necessário */
			height: 100%;             /* garante ocupar os 8vh do .top-navbar */
			display: flex;
			align-items: center;      /* centraliza verticalmente */
			margin-left: 0;           /* se quiser o campo pegando toda largura, sem gap excessivo */
			padding: 0 1rem;          /* deixa um pequeno espaçamento nas laterais, opcional */
		}

        header,
        .nav-container {
            width: 100% !important;
            margin-left: 0 !important;
        }
		
		.nav-menu {
			margin: 0;
    		padding: 0;
			display: none;
			width: 40%;
			flex-direction: column;
			background-color: var(--navbar-bg);
		}
	
		.nav-menu.show{
			display: flex;
			flex-direction: column;
			background-color: var(--navbar-bg);
			/* Posiciona o menu abaixo da top-navbar e colado à esquerda */
			height: 100vh;
			position: absolute;
			top: 8vh;     /* corresponde à altura da .top-navbar (8vh) */
			left: 0;
			width: 40vw; /* ocupa toda a largura da viewport */
			box-shadow: 0 4px 6px var(--navbar-shadow);
			z-index: 2147483646; /* um pouco abaixo da top-navbar */
			gap: 0; /* remove gaps caso ainda existam */
		}

	
		.nav-item {
			width: 100%;
			height: 7vh;
		}

		.nav-item:hover .nav-link,
		.nav-item.active .nav-link {
			height: 7vh;
		}
			
		.logo-text {
			display: flex;
			flex-direction: column;
			font-size: 0.75rem;
			align-items: flex-start; /* ou flex-start, se quiser alinhado à esquerda */
		}

		.nav-link {
			flex-direction: row;
			justify-content: flex-start;
			padding: 0.5em 0.8em;
			height: auto;
			gap: 0.5rem;
			background-color: var(--navbar-bg);
		}

		.nav-link i {
		font-size: 1.5rem;  /* Equivale a ~22.4px */
		}
		
		.nav-link span {
			font-size: 0.75rem; /* Equivale a ~12px */
		}
	
		.search-wrapper {
			width: 100%;
			padding: 0.5em;	
		}

		.profile-details {
			display: none;
		}
			
		.profile-container {
			width: auto;
			padding: 0.5em 1em;
			position: relative; /* para que o submenu use este ponto como referência */
		}

		 /* Faz o submenu abrir à esquerda da imagem, mantendo o container colado à direita */
		.sub-menu-profile {
			display: none;
			position: absolute;
			top: 100%;
			right: 0;      /* ancorado na borda direita do .profile-container */
			left: auto;    /* zera qualquer alinhamento à esquerda */
			background-color: var(--navbar-bg);
			border-radius: 5px;
			overflow: hidden;
			z-index: 1000;
			width: auto;      /* ou defina um width fixo, ex: 140px, se preferir */
			min-width: 120px; /* garante largura mínima para itens internos ficarem cabíveis */
		}

		.sub-menu-profile ul {
			display: flex;
			flex-direction: column;
		}
		.sub-menu-profile li {
			width: 100%;
		}
	
		/* Submenu deve abrir para o lado direito mesmo no mobile */
		.has-submenu {
			position: relative;
			background-color: var(--navbar-bg);
			height:7vh;
		}
	
		.has-submenu .sub-menu {
            display: none;
            position: absolute;
            top: 0;
            left: 100%;
            background-color: var(--submenu-bg);
            min-width: 200px;
            z-index: 9999;
            flex-direction: column;
            }

            /* Quando a própria <li> ganhar .open, exibe apenas o submenu daquele <li> */
            .has-submenu.open .sub-menu {
			background-color: var(--submenu-bg);
            display: flex;
            }
	
		/* .has-submenu:hover .sub-menu {
			display: flex;
			flex-direction: column;
		} */

		/* 1) Remova ou comente qualquer overflow-x: hidden; de .content-table ou .div-for-table */
		.content-table {
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			/* Adicione isto para permitir scroll horizontal */
			overflow-x: auto;
			-webkit-overflow-scrolling: touch; /* rolagem suave no iOS */
		}

		/* 2) Ajuste o elemento que contém diretamente as <table> */
		.content-table .div-for-table {
			width: 100%;
			display: flex;
			flex-direction: column;
			max-height: 65vh; /* se quiser manter o scroll vertical também */
			overflow-y: auto;
			/* deixe overflow-x no pai; não é preciso redundância aqui */
		}

		/* 3) Garanta que a tabela tenha largura mínima para não “quebrar” as colunas */
		.definitive-table {
			/* table-layout: fixed já está definido, só falta o min-width */
			min-width: 800px; /* ajuste para acomodar todas as colunas sem quebrar */
		}

		.outros-btn-pesquisa{
			gap: 1%;
			flex-basis: 15%;
		}

		#container-home{
			height: 95%;
		}

		.div-content-search {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: stretch;
			gap: 1%;
		}

		.div-content-search .div-exibir {
			flex-basis: 100% !important;
			margin-top: 0.5rem;
		}

		.div-content-search button.btn-filtro {
			flex-basis: 100% !important;
			margin-top: 0.5rem;
			justify-content: flex-end;
		}

		.div-container-search {
			/* height: 12.5%;  — comente ou remova */
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-end;
			padding: 0 .5vw .5vw .5vw;
			margin-bottom: 1rem;
		}

		.div-container-search.no-label {
			/* height: calc(12.5% - (16px * 1.1) - .5vw); — remova */
			margin-bottom: 1rem;
		}

		.content-table {
			margin-top: 1rem;
		}

		.buttons-group {
			flex-wrap: nowrap;
			
		}
        
        form{
            width: 100%;
        }

		.grid {
			flex-direction: column;  /* joga tudo em coluna, se preferir */
		}

        .grid .div-input {
            flex: 0 0 100% !important;
            width: 100% !important;
        }

        /* Ajusta também o container que engloba cada grupo de campos (se necessário) */
        .div-input {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        /* Botões que estavam lado a lado (no topo) também passam a empilhar, se houver */
        .options-form,
        .div-options-form {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .div-for-table {
            overflow-x: auto;
        }

        .flex-grow,
		.flex-basis-10,
        .flex-basis-15,
        .flex-basis-20,
        .flex-basis-25,
        .flex-basis-30,
        .flex-basis-33,
        .flex-basis-35,
        .flex-basis-40,
        .flex-basis-45,
        .flex-basis-50,
        .flex-basis-55,
        .flex-basis-60,
        .flex-basis-65,
        .flex-basis-70,
        .flex-basis-75,
        .flex-basis-80,
        .flex-basis-85,
        .flex-basis-90,
        .flex-basis-95,
        .flex-basis-100 {
            flex: 0 0 100% !important;
            width: 100% !important;
        }

        #content-negociacao{
            height: 100%;
        }
        
}

@media (min-width: 769px) {
    .has-submenu:hover .sub-menu {
        display: flex;
    }
}